<template>
<div>
  <div class="loadmore-wrapper" ref="loadmoreWrapper" style="height: 100vh;overflow: scroll">
    <div class="overview-box" ref="overviewBox">
      <div class="overview-time">
        <span  @click="setDate">{{date | dateFilter}}</span>
      </div>
      <div class="overview">
        <ul class="overview-nav">
          <li :class="{active:billNavIndex==1}" @click="toggleBill(1)">
            <p>当月消费</p>
            <p>￥{{incomeMoney | toDecimal}}</p>
          </li>
          <li :class="{active:billNavIndex==2}" @click="toggleBill(2)">
            <p>当月收入</p>
            <p>￥{{expenditureMoney | toDecimal}}</p>
            <span class="wen-hao" @click="helpClick"></span>
          </li>
        </ul>
        <!--消费-->
        <div class="overview-content" v-show="billNavIndex==1">
          <p class="overview-content-title">单笔消费最高</p>
          <ul class="overview-list">
            <li class="overview-list-item" v-if="k<3" v-for="(v,k) in HighestList" :key="k">
              <p>{{v.productName}}</p>
              <p>￥{{v.incomeMoney | toDecimal}}</p>
            </li>
            <li class="overview-list-item" v-for="n in num">
              <p style="color: #999999">虚位以待</p>
            </li>
          </ul>
        </div>
        <!--收入-->
        <div class="overview-content" v-show="billNavIndex==2">
          <p class="overview-content-title">单笔收入最高</p>
          <ul class="overview-list">
            <li class="overview-list-item" v-if="k<3" v-for="(v,k) in HighestList" :key="k">
              <p>{{v.productName}}</p>
              <p>￥{{v.incomeMoney | toDecimal}}</p>
            </li>
            <li class="overview-list-item" v-for="n in num">
              <p style="color: #999999">虚位以待</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="bill-detail-title" ref="billTitle">账单明细</div>

    <mt-loadmore :bottom-method="loadBottom"
               @bottom-status-change="handleBottomChange"
               :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDropText="topDropText" :bottomPullText="topDropText">
      <ul class="bill-list">
        <li class="bill-list-item" v-for="(v,k) in billList" :key="k">
          <router-link :to="{name:'billDetail',query:{billId:v.id}}" v-if="v.payeeAccountId==v.payerAccountId">
            <div class="bill-list-item-left">
              <p v-if="v.businessOrderType==balanceRecharge">余额充值</p>
              <p v-if="v.businessOrderType==cashDepositRecharge">保证金充值</p>
              <p v-if="v.businessOrderType==cashDepositDeduct">保证金扣除</p>
              <p v-if="v.businessOrderType==balancePut">余额提现</p>
              <p v-if="v.businessOrderType==cashDepositAdd">获得保证金</p>
              <p v-if="v.businessOrderType==cashDepositPut">提取保证金</p>
              <p>{{v.transactionTime | convertDate}}</p>
            </div>
            <div class="bill-list-item-right">
              <p class="add">+{{v.needPayMoney | toDecimal}}</p>
            </div>
          </router-link>
          <router-link :to="{name:'billDetail',query:{billId:v.id}}">
            <div class="bill-list-item-left" :class="{refund:v.businessOrderType==refund}">
              <p v-if="v.businessOrderType==buyProduct">{{v.productName}}</p>
              <p v-if="v.businessOrderType==balanceRecharge">余额充值</p>
              <p v-if="v.businessOrderType==cashDepositRecharge">保证金交纳</p>
              <p v-if="v.businessOrderType==cashDepositDeduct">保证金扣除</p>
              <p v-if="v.businessOrderType==balancePut">余额提现</p>
              <p v-if="v.businessOrderType==cashDepositAdd">获得保证金</p>
              <p v-if="v.businessOrderType==cashDepositPut">提取保证金</p>
              <p v-if="v.businessOrderType==refund">退款</p>
              <p>{{v.transactionTime | convertDate}}</p>
            </div>
            <div class="bill-list-item-right">
              <p class="add" v-if="v.payeeAccountId!=v.payerAccountId&&v.payeeAccountId==userId">+{{v.needPayMoney | toDecimal}}</p>
              <p v-if="v.payerAccountId==userId">-{{v.needPayMoney | toDecimal}}</p>
              <p v-if="v.wasSafeguard==1">客服维权中</p>
              <p v-if="v.orderStatus==waitForPay">待付款</p>
              <p v-if="v.orderStatus==waitForDelivery">待发货</p>
              <p v-if="v.wasSafeguard==0&&v.orderStatus==waitForReceive">等待确认收货</p>
            </div>
          </router-link>
        </li>
      </ul>
    </mt-loadmore>

    <div class="no-data" v-show="billList.length==0">
      <img src="../../../../static/images/me/no_data.png" alt="">
      <p>无数据</p>
    </div>
  </div>
  <div class="to-top" ref="toTop" @click="toTop"></div>
</div>
</template>

<script>
  import Moment from 'moment';
  import {getStatusMapByKey,getUser} from '../../../assets/js/tools';
  import {getIncomeOrExpenditureByMonth,getBills,getHighestIncome} from "../../../assets/js/getData";
  export default {
    name: "myBill",
    data(){
      return {
        userId:null,
        billNavIndex:1,//账单切换下标
        date:null,//时间
        expenditureMoney:0,//月收入
        incomeMoney:0,//月支出
        queryType:1,//0收入 1支出
        HighestList:[],//排行列表
        billList:[],//账单列表

        waitForPay:null,//待付款5
        waitForDelivery:null,//待发货10
        waitForReceive:null,//待收货15
        waitForEvaluation:null,//待评价20
        paying:null,//支付中7
        invalid:null,//无效0
        finished:null,//交易完成50

        buyProduct:null,//购买商品1
        balanceRecharge:null,//余额充值2
        cashDepositRecharge:null,//保证金交纳3
        cashDepositDeduct:null,//保证金扣除4
        balancePut:null,//余额提现5
        cashDepositAdd:null,//获得保证金6
        cashDepositPut:null,//提取保证金7
        refund:null,//退款8

        pageNum:1,
        pageSize:5,
        total:null,
        allLoaded: false,
        topDropText:'加载更多',
      }
    },
    created(){
      let eOrderStatus = getStatusMapByKey('eOrderStatus');
      this.invalid = eOrderStatus.invalid.val;//无效0
      this.paying = eOrderStatus.paying.val;//支付中7
      this.waitForPay = eOrderStatus.waitForPay.val;//待付款5
      this.waitForDelivery = eOrderStatus.waitForDelivery.val;//待发货10
      this.waitForReceive = eOrderStatus.waitForReceive.val;//待收货15
      this.waitForEvaluation = eOrderStatus.waitForEvaluation.val;//待评价20
      this.finished = eOrderStatus.finished.val;//交易完成50

      let eOrderType = getStatusMapByKey('eOrderType');
      this.buyProduct = eOrderType.buyProduct.val;//购买商品1
      this.balanceRecharge = eOrderType.balanceRecharge.val;//余额充值2
      this.cashDepositRecharge = eOrderType.cashDepositRecharge.val;//保证金交纳3
      this.cashDepositDeduct = eOrderType.cashDepositDeduct.val;//保证金扣除4
      this.balancePut = eOrderType.balancePut.val;//余额提现5
      this.cashDepositAdd = eOrderType.cashDepositAdd.val;//获得保证金6
      this.cashDepositPut = eOrderType.cashDepositPut.val;//提取保证金7
      this.refund = eOrderType.refund.val;//退款8

      this.userId = getUser().id;


      this.date = Moment().format('YYYY-MM-DD');

      this.getBillByMonth();
      this.getHighestList();
      this.getBillList();
      //总页数
      this.getTotal();
    },
    filters: {
      dateFilter: (value) => {
        if(!value){
          return value;
        }
        value = value.replace(/-/g,'/');
        let data = new Date(value);
        let time = data.getTime();
        return Moment(time).format('YYYY-MM');
      }
    },
    computed:{
      num(){
        if(this.HighestList.length>=3){
          return 0;
        }else {
          return 3-this.HighestList.length;
        }
      },
    },
    mounted(){
      this.$refs.loadmoreWrapper.addEventListener('scroll', this.handleScroll)
    },
    methods:{
      handleScroll () {
        let scrollTop = this.$refs.loadmoreWrapper.pageYOffset || this.$refs.loadmoreWrapper.scrollTop || this.$refs.loadmoreWrapper.scrollTop;
        console.log(scrollTop);
        let h = this.$refs.overviewBox.offsetHeight;
        if(scrollTop>=h){
          this.$refs.toTop.style.display = 'block';
        }else {
          this.$refs.toTop.style.display = 'none';
        }
      },
      toTop(){
        this.$refs.loadmoreWrapper.scrollTop = 0;
      },
      //上拉加载更多
      loadBottom() {
        if(this.pageNum < this.total) {
          this.pageNum++;
          this.getBillList(true);
        }else {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      handleBottomChange(status){
        // console.log(status);
      },

      //获取账单月收入/支出
      getBillByMonth(){
        getIncomeOrExpenditureByMonth(this.date).then(res => {
          if(res.data.reqResult.code>0){
            if(res.data.hasOwnProperty('data')){
              this.expenditureMoney = res.data.data.expenditureMoney;//月收入
              this.incomeMoney = res.data.data.incomeMoney;//月支出
            }else {
              this.expenditureMoney = 0;//月收入
              this.incomeMoney = 0;//月支出
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //收入排行
      getHighestList(){
        getHighestIncome(this.date,this.queryType).then(res => {
          if(res.data.reqResult.code>0){
            this.HighestList = res.data.data;
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //账单列表
      getBillList(isLoaded){
        let params = {
          createTime:this.date,
          pageNum:this.pageNum,//页码
          pageSize:this.pageSize,
        };
        getBills(params).then(res => {
          if(res.data.reqResult.code>0){
            // this.total = Math.ceil(res.data.total / this.pageSize);
            if(isLoaded){
              this.billList = this.billList.concat(res.data.data);
            }else {
              this.billList = res.data.data;
            }
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      getTotal(){
        let params = {
          createTime:this.date,
        };
        getBills(params).then(res => {
          if(res.data.reqResult.code>0){
            this.total = Math.ceil(res.data.data.length / this.pageSize);
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },

      //点击问号
      helpClick(){
        MessageBox('', `<p style="text-align: left">当月消费：当月购买拍品的总消费金额（含邮费）；</p>
          <p style="text-align: left">当月收入：当月出售拍品的总收入金额（含邮费）；</p>
          <p style="text-align: left">如发生了退款，则减去相应金额；</p>
          <p style="text-align: left">账单明细：展示消费、收入、退款等账单信息；</p>
          `)
      },
      //切换收入支出
      toggleBill(k){
        this.billNavIndex = k;
        if(k==1){
          this.queryType = 1;
        }else {
          this.queryType = 0;
        }
        this.getHighestList();
      },
      //设置时间
      setDate(){
        this.$picker.show({
          type:'datePicker',
          date:this.date,  //初始化时间
          endTime:'2030-12-30',  //截至时间
          startTime:'2000-1-1',  //开始时间,日期格式不能是2000-01-01
          onOk:(e) => {
            this.date = e;
            this.pageNum = 1;
            this.allLoaded = false;
            this.getBillByMonth();
            this.getHighestList();
            this.getBillList();
            //总页数
            this.getTotal();
          },
        })
      },
    }
  }
</script>

<style scoped>
  .overview-box{
    padding: 0 0.75rem 1rem 0.75rem;
  }
  .overview-time{
    height: 2.15rem;
    line-height: 2.15rem;
    text-align: center;
  }
  .overview-time span{
    display: inline-block;
    color: #333333;
    font-size: 0.7rem;
    position: relative;
  }
  .overview-time span:before{
    content: '';
    height: 0px;
    width: 0px;
    border-left: 3px solid transparent;
    border-top: 4px solid #333333;
    border-right: 3px solid transparent;
    position: absolute;
    right: -9px;
    top: 50%;
  }
  .overview{
    border-radius: 4px;
    box-shadow: 0 0 7px 0 rgba(35, 24, 21, 0.13);
  }
  .overview-nav{
    display: flex;
  }
  .overview-nav li{
    width: 50%;
    height: 3.4rem;
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  .wen-hao{
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background: url("../../../../static/images/me/wen.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
  }
  .overview-nav li p:first-child{
    font-size: 0.6rem;
    color: #666666;
    line-height: 0.6rem;
    margin-bottom: 0.45rem;
  }
  .overview-nav li p:nth-child(2){
    font-size: 0.8rem;
    color: #333333;
    line-height: 0.8rem;
    font-weight: bold;
  }
  .overview-nav li.active{
    background-color: #ffffff;
  }
  .overview-content{
    padding-top: 1rem;
  }
  .overview-content-title{
    color: #666666;
    font-size: 0.6rem;
    line-height: 0.6rem;
    padding-left: 0.75rem;
  }
  .overview-list{
    padding: 0.85rem 1.15rem 0.95rem 1.15rem;
  }
  .overview-list-item{
    display: flex;
    justify-content: space-between;
    height: 0.95rem;
    line-height: 0.95rem;
    margin-bottom: 0.75rem;
  }
  .overview-list-item:last-child{
    margin-bottom: 0;
  }
  .overview-list-item p{
    color: #333333;
    font-size: 0.7rem;
  }
  .overview-list-item p:first-child{
    width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 1.35rem;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .overview-list-item:first-child p:first-child{
    background-image: url("../../../../static/images/me/jin.png");
  }
  .overview-list-item:nth-child(2) p:first-child{
    background-image: url("../../../../static/images/me/yin.png");
  }
  .overview-list-item:nth-child(3) p:first-child{
    background-image: url("../../../../static/images/me/tong.png");
  }
  .bill-detail-title{
    height: 2rem;
    line-height: 2rem;
    background-color: #eeeeee;
    padding-left: 0.75rem;
    color: #333333;
    font-size: 0.7rem;
  }
  .bill-list{
    padding: 0 0.75rem;
  }
  .bill-list-item>a{
    padding-top: 0.85rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    justify-content: space-between;
  }
  .bill-list-item-left,.bill-list-item-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 2.15rem;
  }
  .bill-list-item-left{
    text-align: left;
    padding-left: 2.75rem;
    background-image: url("../../../../static/images/me/income.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .bill-list-item-left.refund{
    background-image: url("../../../../static/images/me/refund.png");
  }
  .bill-list-item-left p:first-child{
    color: #333333;
    font-size: 0.7rem;
    line-height: 0.7rem;
    width: 5.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bill-list-item-left p:nth-child(2){
    color: #999999;
    font-size: 0.65rem;
    line-height: 0.65rem;
  }
  .bill-list-item-right{
    text-align: center;
  }
  .bill-list-item-right p:first-child{
    color: #000000;
    font-size: 0.9rem;
    line-height: 0.9rem;
  }
  .bill-list-item-right p:nth-child(2){
    color: #F17558;
    font-size: 0.6rem;
    line-height: 0.6rem;
  }
  .bill-list-item-right p.add{
    color: #C50000;
  }
  .no-data{
    width: 3.55rem;
    margin: 0 auto;
    margin-top: 3.85rem;
  }
  .no-data img{
    width: 3.55rem;
  }
  .no-data p{
    color: #999999;
    font-size: 0.65rem;
    line-height: 0.65rem;
    margin-top: 0.75rem;
    text-align: center;
  }
  .to-top{
    display: none;
    width: 1.95rem;
    height: 1.95rem;
    background: url("../../../../static/images/me/toTop.png") no-repeat;
    background-size: contain;
    position: fixed;
    right: 0.9rem;
    bottom: 1.05rem;
  }
</style>














